/*
========================================================================
MODERN MODAL TASARIMI
------------------------------------------------------------------------
 Bu CSS, mevcut HTML/JS yapısını kullanarak modalı modern,
 iki sütunlu ve kullanıcı dostu bir arayüze dönüştürür.
========================================================================
*/

/* === 1. MODAL'IN ANA ÇERÇEVESİ VE ARKA PLAN === */
.product-details-popup-wrapper {
    /* Bu class zaten temanızda var ve modalı ortalıyor. */
    /* Biz içindeki .product-details-popup'ı şekillendireceğiz. */
}

.product-details-popup {
    max-width: 960px; /* Daha geniş ve ferah bir modal */
    width: 95%;
    max-height: 90vh; /* Ekran yüksekliğinin %90'ını kaplasın */
    min-height: 85vh;
    background-color: #f8f9fa; /* Hafif kirli beyaz arka plan */
    border-radius: 16px; /* Daha modern yuvarlak köşeler */
    overflow: hidden; /* Köşelerden taşan içeriği gizle */
    display: flex; /* İçeriğin esnek bir şekilde yayılmasını sağlar */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Kapatma butonu popup'ın içinde, sağ üst köşede olsun */
.product-details-close-btn {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    border: 1px solid #ddd;
    border-radius: 50%;
    z-index: 1001; /* Her şeyin üstünde */
    transition: all 0.2s ease;
}

.product-details-close-btn:hover {
    background-color: #fff;
    transform: scale(1.1) rotate(90deg);
}

/* === 2. İKİ SÜTUNLU ANA YAPI (GRID İLE) === */
/* JS'in ürettiği ana içerik alanını Grid'e çeviriyoruz */
#modal-dynamic-content-area {
    display: grid;
    grid-template-columns: 40% 60%; /* Sol %40 (Resim), Sağ %60 (İçerik) */
    width: 100%;
    height: 100%;
}

/* === 3. SOL SÜTUN: SABİT ÜRÜN RESMİ === */
.product-thumb-area {
    position: relative; /* Resmin mutlak konumlanması için */
    height: 100%; /* Sütun yüksekliği kadar olsun */
    max-height: 90vh; /* Ana popup yüksekliği ile aynı */
}

.modal-image-fixed-container {
    position: sticky; /* Kilit nokta: Kaydırmadan etkilenmez */
    top: 0;
    height: 100%;
    max-height: inherit; /* Ebeveyninden max-height'ı alsın */
}

.modal-image-fixed-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Resmi kırparak alanı doldurur, oranı korur */
}

/* === 4. SAĞ SÜTUN: KAYDIRILABİLİR İÇERİK === */
.modal-scrollable-area {
    background-color: #fff;
    overflow-y: auto;          /* Tüm sağ sütun kaymaya devam edecek. */
    position: relative;        /* Alt menü buna göre konumlanacak. */

    padding: 35px 40px 0 40px;
}


/* Kaydırma çubuğu stili */
.modal-scrollable-area::-webkit-scrollbar { width: 8px; }
.modal-scrollable-area::-webkit-scrollbar-track { background: #f1f1f1; }
.modal-scrollable-area::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }
.modal-scrollable-area::-webkit-scrollbar-thumb:hover { background-color: #aaa; }


/* === 5. ÜST BİLGİ ALANI (BAŞLIK, AÇIKLAMA) === */
.product-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

/* Express ürünlerindeki varyantsız fiyat gösterimi için */
.product-price {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: #442C6C;;
    margin-bottom: 15px;
}
.product-price .old-price {
    font-size: 18px;
    color: #888;
    text-decoration: line-through;
    margin-right: 8px;
}

.modal-scrollable-area > p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* === 6. BÖLÜM AYIRAÇLARI VE BAŞLIKLARI === */
.section-divider {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
}

.required-tag {
    background-color: #fef4f4;
    color: #e53935;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* === 7. SEÇİM KARTLARI  === */
.choice-card-input { display: none !important; }
.choice-card-label { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 10px; margin-bottom: 12px; cursor: pointer; transition: all .3s ease-in-out; }
.choice-card-label:hover { border-color: #442C6C; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); }
.choice-card-input:checked + .choice-card-label { border-color: #442C6C; background-color: #e7f1ff; }
.choice-card-label.popular { border-color: #27ae60; }
.choice-card-input:checked + .choice-card-label.popular { background-color: #e6f8ee; border-color: #27ae60; }
.choice-card-info { display: flex; flex-direction: column; gap: 2px; }
.choice-card-title { font-weight: 600; font-size: 16px; color: #333; text-transform: capitalize; }
.choice-card-details { font-size: 14px; color: #555; }
.choice-card-actions { display: flex; align-items: center; gap: 12px; }

.price-tag { font-size: 16px; font-weight: 600; }
.price-tag .original-price { text-decoration: line-through; color: #999; font-weight: 500; margin-right: 5px; }
.price-tag.paid { color: #e53935; } /* Fiyat farkı için */

.badge { font-weight: 500; font-size: 14px; padding: 4px 10px; border-radius: 20px; }
.badge.delivery-free { background-color: #e6f8ee; color: #27ae60; }
.badge.delivery-paid { background-color: #fdf2f2; color: #e53935; }

.selection-indicator {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.selection-indicator .fa-check {
    font-size: 12px;
    color: white;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.choice-card-input:checked + .choice-card-label .selection-indicator {
    background-color: #442C6C;
    border-color: #442C6C;
}

.choice-card-input:checked + .choice-card-label .selection-indicator .fa-check {
    transform: scale(1);
}

/* === 8. YEMEK SEÇİM LİSTESİ STİLLERİ === */
.meal-choice-item .choice-card-label, .fixed-meal-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.choice-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
#fixedProductList { display: flex; flex-direction: column; gap: 10px; }
.fixed-meal-item { background-color: #f8f9fa; padding: 10px; border-radius: 10px; }


/* === 9. YAPIŞKAN ALT MENÜ (STICKY FOOTER) - KİLİT ÖZELLİK === */
.modal-bottom-actions {
    position: sticky;  
    bottom: -1px;             /* Ebeveyninin (.modal-scrollable-area) en altına sabitler. */
    left: 0;                 /* Ebeveyninin sol kenarına hizalar. */
    width: 100%;             /* Ebeveyninin tam genişliğini kaplar. */
    box-sizing: border-box;  /* Padding ve border'ın genişliğe dahil olmasını sağlar. */

    /* Geri kalan stiller görsel tutarlılık için aynı kalır */
    display: flex;
    gap: 15px;
    padding: 20px 40px;
    background-color: #ffffff;
    /*border-top: 1px solid #e9ecef;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);*/
    z-index: 100;
}

.quantity-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;

    /*
    KİLİT DÜZELTME 1: "DOKUNULMAZLIK"
    Bu kural, "add-to-cart-btn" ne kadar büyürse büyüsün,
    bu elementin içeriğinin genişliğinden daha fazla küçülmesini engeller.
    Böylece butonlar asla kaybolmaz.
    */
    flex-shrink: 0;
}

.stepper-button {
    background: none;
    border: none;
    color: #333;
    font-size: 16px; /* İkon boyutu için temel */
    cursor: pointer;
    transition: background-color 0.2s;

    /*
    KİLİT DÜZELTME 2: PROFESYONEL BOYUTLANDIRMA
    Padding ile boyut vermek yerine, sabit genişlik ve yükseklik verip
    içindeki ikonu flexbox ile ortalamak daha temiz ve güvenilirdir.
    */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-button:hover {
    background-color: #f5f5f5;
}

.stepper-quantity {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    min-width: 40px; /* 10 gibi iki haneli sayılar için yer bırakır */

    /*
    KİLİT DÜZELTME 3: GEREKSİZ PADDING'İ KALDIRMA
    Genişliği min-width ile kontrol ettiğimiz için yan boşluklara gerek kalmadı.
    */
    padding: 0;
}

.add-to-cart-btn {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #442C6C;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.add-to-cart-btn {
    border: 1px solid transparent; /* Hover'ta kenar eklenince kaymayı önlemek için */
    transition: background-color 0.2s, transform 0.1s, color 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

.add-to-cart-btn:hover {
    background-color: #ffffff;
    color: #442C6C;          /* Yazı rengi */
    border-color: #442C6C;   /* Kenar rengi */
    box-shadow: 0 2px 8px rgba(68, 44, 108, 0.06);
}

.add-to-cart-btn:active {
    transform: scale(1.1);
}

.add-to-cart-btn:disabled {
    background-color: #a0a0a0;
    cursor: not-allowed;
    color: #ffffff;
    border-color: transparent;
}

.cart-btn-price { font-size: 17px; }


/* === 10. DİĞER ELEMENTLER (NOT ALANI, LOADER) === */
#productNoteInput {
    min-height: 80px;
    border-radius: 10px;
    border-color: #e0e0e0;
}
#productNoteInput:focus {
    border-color: #442C6C;
    box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);
}

#modal-loader { display: none !important; }
#modal-loader.active { display: flex !important; }

 /* ===================================================================
    MODAL İÇİ STOK ETİKETLERİ VE DEVRE DIŞI STİLLERİ
    -------------------------------------------------------------------
    Bu kurallar, temanın diğer stillerini ezerek her ekran boyutunda
    tutarlı bir görünüm sağlamak için daha spesifik seçiciler ve
    !important kuralını kullanır.
    =================================================================== */

    /* Stok etiketleri için genel stil */
    /* Seçiciyi daha spesifik hale getiriyoruz: modal içindeki .choice-card-actions'a ait bir .stock-badge */
    .product-details-popup .choice-card-actions .stock-badge {
        font-weight: 500 !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
        margin-right: 8px !important;
        /* Dikey hizalamayı garantilemek için */
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Stoğu tükenmiş etiket stili */
    .product-details-popup .choice-card-actions .stock-badge.out-of-stock {
        background-color: #fbe9e7 !important;
        color: #c62828 !important;
    }

    /* Stoğu az kalmış etiket stili */
    .product-details-popup .choice-card-actions .stock-badge.low-stock {
        background-color: #fff4e6 !important;
        color: #f39c12 !important;
    }

    /* Stoğu tükenmiş ve tıklanamaz olan seçeneklerin label stili */
    /* Seçiciyi daha da spesifik hale getiriyoruz: 'disabled' olan bir input'un hemen yanındaki label */
    .product-details-popup input.choice-card-input:disabled + label.choice-card-label {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
        background-color: #f5f5f5 !important;
        border-color: #e0e0e0 !important;
        box-shadow: none !important; /* Gölgeyi de sıfırla */
    }

    /* Tıklanamaz seçeneğin üzerine gelindiğinde efektleri kaldır */
    .product-details-popup input.choice-card-input:disabled + label.choice-card-label:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: #e0e0e0 !important; /* Hover'da kenarlık renginin değişmesini engelle */
    }

    /* === 11. RESPONSIVE TASARIM (MOBİL GÖRÜNÜM) === */
    @media (max-width: 991px) {
        .product-details-popup {
            max-height: 95vh;
            border-radius: 0; /* Mobilde tam ekran hissi */
        }

        /* Ana yapıyı tek sütuna çeviriyoruz */
        #modal-dynamic-content-area {
            grid-template-columns: 1fr; /* Tek sütun */
            max-height: 95vh;
            overflow-y: auto; /* Artık ana container kayacak */
        }

        /* Resim alanı artık sabit değil, içerik akışında */
        .product-thumb-area {
            position: relative;
            height: auto; /* Otomatik yükseklik */
        }
        .modal-image-fixed-container {
            position: relative; /* Sabitliği kaldır */
            height: 300px; /* Sabit bir resim yüksekliği */
        }

        /* İçerik alanı padding'lerini düzenle */
        .modal-scrollable-area {
            overflow-y: visible; /* İç kaydırmayı iptal et */
            padding: 25px 20px 120px 20px; /* Kenar boşluklarını azalt */
        }

        /* Alt menü artık ana container'a göre yapışkan */
        .modal-bottom-actions {
            padding: 15px 20px;
        }
    }
/*
    ========================================================================
    === 19. HER KOŞULDA GEÇERLİ EZİCİ KURAL ===
    ------------------------------------------------------------------------
    Bu kural, temanın @media sorguları da dahil olmak üzere tüm stillerini
    ezmek için tasarlanmış, olabilecek en yüksek öncelikli ve evrensel bir
    seçici kullanır. İstenmeyen sözde-elementleri her ekran boyutunda
    koşulsuz olarak yok eder.
    ========================================================================
    */
    body.vendor-details .product-details-popup-wrapper.popup #modal-dynamic-content-area .choice-card-label::before,
    body.vendor-details .product-details-popup-wrapper.popup #modal-dynamic-content-area .choice-card-label::after {
        
        /* KESİN ÇÖZÜM: Elementin oluşmasını temelden engelle. */
        content: none !important;
        
        /* GÜVENCE: Görünür olmasını sağlayan diğer tüm olasılıkları da yok et. */
        display: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }